<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .myborder {
            background-color: red;
        }
        
        .myfont {
            font-size: 20px;
        }
        
        .img1 {
            border: 10px solid red;
            width: 1000px;
            height: 800px;
        }
    </style>
</head>

<body>
    <input type="text" id="input">
    <div id="div1" style="color: red;" class="myborder myfont" title="div1">无敌爆爆龙</div>
    <img src="./img/2.png" class="img1">

    <div id="outer">
        <div id="middle">
            <div id="inner">Click me</div>
        </div>
    </div>

    <script>
        let div1 = document.getElementById("div1")
        div1.title = "无敌爆爆龙1号"
        div1.style.color = "blue"
        console.log(div1.title)
        div1.setAttribute("title", "无敌爆爆龙2号")
        let title = div1.getAttribute("title")
        let img = document.getElementsByTagName("img")[0]
        img.style.border = "10px red solid"
        div1.classList.add("myfont")
        let flag = img.classList.contains("img1")
        console.log(flag)

        // 鼠标事件
        div1.addEventListener("click", function() {
            console.log("无敌爆爆龙被点击了")
            div1.classList.toggle("myfont")
        })
        img.addEventListener("mouseenter", function() {
            console.log("鼠标移入图片区域")
        })
        img.addEventListener("mouseleave", function() {
            console.log("鼠标移出图片区域")
        })
        img.addEventListener("mousemove", function() {
            console.log("鼠标在图片区域移动")
        })

        // 键盘事件
        let input = document.getElementById("input")
        input.addEventListener("keyup", (event) => {
            console.log(event.key, "被按下并抬起")
        })

        // 冒泡阶段
        document.getElementById('outer').addEventListener('click', () =>
            console.log('Outer'));
        document.getElementById('middle').addEventListener('click', () =>
            console.log('Middle'));
        document.getElementById('inner').addEventListener('click', () =>
            console.log('Inner'));
    </script>
</body>

</html>